/** @jsxImportSource @emotion/react */
import * as React from "react";
import {css} from "@emotion/react";
import {
  CCell, Cell, Table, TableBody, TableRow, Text, TableHead, TextArea, BlobInputList,
} from "customize-easy-ui-component";
import {InspectRecordLayout, InternalItemProps, RepLink, useItemInputControl} from "../../common/base";
import {FootMenRow,} from "../../contain/rarelyVary";
import {useMeasureInpFilter} from "../../common/hooks";
import {objNestSet} from "../../../common/tool";
import {useOmnipotentPrefCs, useOmnipotentPrefTitle} from "../../hook/useOmnipotentPref";
import {检查结果选} from "./Macroscopic";

const items检验项 = [
    ['宏损伤', [{t:'内外部宏观检验',s:5}], '裂纹和机械损伤', ],
    ['腐蚀', [{}], '腐蚀', ],
    ['凹陷', [{}], '凹陷', ],
    ['鼓包', [{}], '鼓包', ],
    ['火焰损', [{}], '火焰损伤' ],
    ['超声波', [], '全自动超声波检测' ],
    ['壁厚测', [], '壁厚测定' ],
    ['磁粉检', [], '磁粉检测' ],
    ['渗透检', [], '渗透检测' ],
    ['水压试', [], '水压试验' ],
    ['声发射检', [], '声发射检测' ],
    ['硬度检', [], '硬度检测' ],
    ['端塞检', [{t:'附件检验',s:3}], '气瓶端塞检验' ],
    ['阀门检', [{}], '管路和阀门检验' ],
    ['附件检', [{}], '安全附件检验' ],
    ['气密试', [], '整体气密性试验' ],
    ['检其他', [], '其他' ],
];
export const itemA评定汇: string[] = ['附页说明' ];
items检验项.forEach(([name, title, initIsp], i: number) => {
  itemA评定汇.push(name as string);
});
interface Props extends InternalItemProps {
    part?: number;
}
export const AppendixPage =
    React.forwardRef((
        {children, show, alone = true, refWidth, label, part=1}: Props, ref
    ) => {
      const {inp, setInp} = useItemInputControl({ref});
      const [getInpFilter] = useMeasureInpFilter(null, itemA评定汇,);
      const config=items检验项;
      const titNode=useOmnipotentPrefTitle({config, });
      return (
          <InspectRecordLayout inp={inp} setInp={setInp} getInpFilter={getInpFilter} show={show}
                               alone={alone} label={label!}>
            <Text variant="h5">{label}：</Text>
            {config.map(([name, _1, _2, unit]: any, i: number) => {
              return (<React.Fragment key={i}>
                <div css={{display: 'flex', flexWrap: 'wrap', alignItems: 'center'}}>
                  {titNode[i]}
                  <div css={{display: 'inline-flex', alignItems: 'center', flexWrap: 'wrap'}}>
                    检验结果：
                    <BlobInputList value={inp?.[name]?.r || ''} datalist={检查结果选} rows={1}
                                   style={{display: 'inline-flex', width: '9rem', maxWidth: '100%', fontSize: '1rem',}}
                                   listStyle={css({fontSize: '1rem',})}
                                   onListChange={v => objNestSet(name, 'r', v || undefined, inp, setInp)}/>
                  </div>
                  <div css={{display: 'inline-flex', alignItems: 'center', flexWrap: 'wrap'}}>
                    情况概述：
                    <BlobInputList value={inp?.[name]?.m || ''}  rows={2}
                                   style={{display: 'inline-flex', width: '16rem', maxWidth: '100%',}}
                                   onListChange={v => objNestSet(name, 'm', v || undefined, inp, setInp)}/>
                  </div>
                </div>
              </React.Fragment>);
            })}
            <hr/>
             备注：
            <TextArea  value={inp?.附页说明 ||''} rows={6}
                       onChange={e => setInp({ ...inp, 附页说明: e.currentTarget.value||undefined}) } />
            {children}
          </InspectRecordLayout>
      );
  });

const tailRender = (orc: any, name: string, lix: number, unit: any) => {
  const nneedbig = orc?.[name]?.r?.length >= 3 || (!orc?.[name]?.r);
  return <>
      <CCell>{orc?.[name]?.m ?? '／'}</CCell>
      <CCell><Text css={{fontSize: nneedbig ? '0.875rem' : '1.15rem'}}>{orc?.[name]?.r ?? '／'}</Text></CCell>
  </>;
}

export const AppendixPageVw = ({orc, rep}: { orc: any, rep: any }
) => {
  const [renderP1] = useOmnipotentPrefCs({orc, config: items检验项,
                     tag:'ApxIspItms', tailRender, pcols: 1, noNo: true, unitCel: false});
  return <>
    <div css={{"@media print": {paddingBottom: '5.5rem', pageBreakInside: 'avoid'}}}>
      <Text id='AppendixPage' variant="h2" css={{textAlign: 'center', marginTop: '1rem',
      }}>检验结果评定汇总</Text>
      <div css={{display: 'flex', justifyContent: 'space-between'}}>
          <Text>使用证号：{orc?.使用证号}</Text>
        <Text>报告编号：{rep.isp.no}</Text>
      </div>
    </div>
    <Table fixed={ ["7%", "15%", "%", "21%"] }
              css={{borderCollapse: 'collapse', "@media print": {marginTop: '-5.5rem'}}} tight miniw={800}>
      <TableHead>
        <TableRow>
          <CCell colSpan={2}>检验项目</CCell><CCell>情况概述</CCell><CCell>检验结果</CCell>
        </TableRow>
      </TableHead>
      <TableBody>
        <RepLink rep={rep} tag={'AppendixPage'}>
            {renderP1}
            <TableRow>
                <Cell split={true} colSpan={4}>
                    <div css={{minHeight: '2rem', whiteSpace: 'pre-wrap'}}>
                        &nbsp; 备注：<br/>{orc?.附页说明 || '／'}
                    </div>
                </Cell>
            </TableRow>
        </RepLink>
      </TableBody>
       <FootMenRow span={4} orc={orc} rep={rep} href={`/report/${rep?.modeltype}/ver/${rep?.modelversion}/${rep?.id}/ProjectList#ProjectList`}/>
    </Table>
  </>;
};
